<template>
  <div>
    debounce
    <el-button @click='start'>debounce</el-button>
  </div>
</template>

<script>
let timeout
export default {
  name: 'debounce',
  data() {
    return {}
  },
  methods: {
    /**
     * @desc 防抖函数：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
     * @param {Function} func 函数
     * @param {Number} wait 延迟执行毫秒数
     * @param {Boolean} immediate true 表示立即执行，false 表示非立即执行
     */


    debounce(func, wait = 500, immediate = false) {
      // 清除定时器
      if (timeout) clearTimeout(timeout)
      // 立即执行，此类情况一般用不到
      if (immediate) {
        let callNow = !timeout
        timeout = setTimeout(() => {
          timeout = null
        }, wait)
        if (callNow) typeof func === 'function' && func()
      } else {
        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
        timeout = setTimeout(() => {
          typeof func === 'function' && func()
        }, wait)
      }
    },

    submit() {
      console.log('提交')
    },
    start() {
      this.debounce(this.submit, 1000, false)
    }
  }
}
</script>

<style scoped>

</style>
